<template>
    <div class="right">
        <div class="body-header"></div>
        <div class="menu-box">
            <div class="title">排行榜</div>
            <div class="user-list custom-scrollbar">
                <div class="user-item flex align-items-center" v-for="(item,index) in props.rankingList" :key="index">
                    <div class="order">{{index+1}}</div>
                    <div class="name one-line-hidden flex-1">{{item.name}}</div>
                    <div class="score">{{item.score||'0'}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
    import {reactive, onMounted, defineProps} from 'vue';

    const dateData = reactive({
        date: '',
        time: ''
    });
    const props = defineProps({
        rankingList: []
    });
    onMounted(() => {
        getDate();
    });
    const getDate = () => {
        const date = new Date();
        dateData.date = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
        dateData.time = `${date.getHours()}:${date.getMinutes()}`;
        window.setTimeout(() => {
            getDate();
        }, 1000);
    };
</script>

<style scoped lang="less">
    .right {
        width: 200px;
        background: #fff;
        position: relative;
        border-left: 2px solid rgba(155, 141, 128, 1);
        height: 100%;

        .body-header {
            height: 28px;
            background: rgba(155, 141, 128, 1);
        }

        .menu-box {
            text-align: center;
            position: relative;
            height: calc(100% - 28px);

            .user-list {
                font-size: 12px;
                height: 100%;
                overflow: auto;

                .user-item {
                    padding: 10px 5px;

                    &:nth-child(even) {
                        background: #ddd;
                    }

                    &:nth-child(1) {
                        .order {
                            background: yellow;
                            color: red;
                        }
                    }

                    &:nth-child(2) {
                        .order {
                            background: yellow;
                            color: red;
                        }
                    }

                    &:nth-child(3) {
                        .order {
                            background: yellow;
                            color: red;
                        }
                    }

                    .order {
                        background: #999;
                        width: 26px;
                        height: 16px;
                        line-height: 16px;
                        -webkit-border-radius: 2px;
                        -moz-border-radius: 2px;
                        border-radius: 2px;
                        color: #fff;
                    }

                    .name {
                        width: 80px;
                        text-align: left;
                        padding-left: 5px;
                    }
                }
            }

            .title {
                position: absolute;
                font-size: 12px;
                width: 80px;
                background: #fff;
                height: 24px;
                line-height: 24px;
                color: rgba(155, 141, 128, 1);
                top: -24px;
                left: 3px;
                -webkit-border-top-left-radius: 3px;
                -moz-border-top-left-radius: 3px;
                border-top-left-radius: 3px;
                -webkit-border-top-right-radius: 3px;
                -moz-border-top-right-radius: 3px;
                border-top-right-radius: 3px;
            }
        }
    }
</style>